<template>
  <view>
    <DefineTmp v-slot="{label,value,onEvent}">
      <view class="flex-between u-f-sl p-30 theme" @click="onEvent(value)">
        <view>{{ label }}</view>
        <view class="flex">
          {{ value }}
          <up-icon name="arrow-right"></up-icon>
        </view>
      </view>
    </DefineTmp>
    <UseTmp v-for="(item,index) of settingArr" :key="index" :label="item.label" :value="getValue(item.value)"
            @event="handleSettingEvent(item.value)"></UseTmp>
    <up-picker
        v-model="state.isPicker"
        :safe-area-inset-bottom="true"
        :mode="state.currentMode"
        keyName="label"
        :range="state.currentArr"
        range-key="label"
        :params="{year:true,month:true,day:true}"
        @confirm="confirmTheme"
        @close="state.isPicker = false"
    ></up-picker>
  </view>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {genders, settingArr, SettingType, themeArr} from "@/util/options/system";
import {onLoad} from '@dcloudio/uni-app'
import {useThemeStore} from '@/store/theme'
import {createTemplate} from "@/util/template/DefineTemplate";
import {getTime} from "@/util/event/SysEvent";

const {DefineTmp, UseTmp} = createTemplate()
const themeStore = useThemeStore()

const state = ref({
  isPicker: false,
  theme: 'light',
  currentArr: [],
  currentIndex: 0,
  currentMode: 'selector',
})

const formData = ref({
  avatar: undefined,
  nickname: undefined,
  password: undefined,
  memberId: undefined,
  gender: 3,
  birthday: undefined,
  phone: undefined,
  email: undefined,
  address: undefined,
})


const handleSettingEvent = (type: SettingType) => {
  switch (type) {
    case SettingType.THEME:
      openPicker(1)
      break
    case SettingType.GENDER:
      openPicker(2)
      break
    case SettingType.BIRTHDAY:
      openPicker(3)
      break
    default:
      break
  }
}

const getValue = (type: SettingType) => {
  switch (type) {
    case SettingType.THEME:
      return themeStore.currentTheme === 'light' ? '日间' : '夜间'
      break;
    default:
      return '未知'
      break;
  }
}

const openPicker = (type: number) => {
  state.value.isPicker = !state.value.isPicker
  state.value.currentIndex = type
  switch (type) {
    case 1:
      state.value.currentArr = themeArr
      state.value.currentMode = 'selector'
      break
    case 2:
      state.value.currentArr = genders
      state.value.currentMode = 'selector'
      break
    case 3:
      state.value.currentArr = []
      state.value.currentMode = 'time'
  }
}

const confirmTheme = (val: any) => {
  switch (state.value.currentIndex) {
    case 1:
      uni.setStorageSync("theme", themeArr[val[0]].value)
      themeStore.setTheme(themeArr[val[0]].value)
      break
    case 2:
      // formData.value.gender = genders[val[0]].value
      break
    case 3:
      formData.value.birthday = getTime(`${val.year}:${val.month}:${val.day}`)
      break
    default:
      break
  }
}

onLoad(() => {
  const savedTheme = uni.getStorageSync('theme') || 'light'
  state.value.theme = savedTheme
})
</script>


<style scoped lang="scss">
@import '@/static/css/index.css';

.theme {
  color: var(--text-color);
  border-bottom: 1rpx solid var(--border-color);
}

.u-page {
  padding: 0;
  flex: 1;
  background-color: #f3f4f6;

  &__item {

    &__title {
      color: #909399;
      background-color: #f3f4f6;
      padding: 15px;
      font-size: 15px;

      &__slot-title {
        color: #3c9cff;
        font-size: 14px;
      }
    }
  }
}


</style>
